<template>
  <el-container :class="{ 'dark-mode': isDarkMode }">
    <!-- 头部区域 -->
    <el-header class="main-header">
      <common-header></common-header>
      <!-- 移动端菜单按钮 -->
      <div class="header-actions">
        <div class="theme-toggle" @click="toggleTheme">
          <i :class="isDarkMode ? 'el-icon-sunny' : 'el-icon-moon'"></i>
        </div>
        <div class="mobile-menu-toggle" @click="toggleMobileMenu">
          <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
        </div>
      </div>
    </el-header>

    <el-container style="overflow: hidden;">
      <!-- 侧边栏区域 -->
      <div :class="['sidebar', { 'expanded': !isCollapse, 'mobile-visible': mobileMenuVisible }]" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
        <div class="logo-container">
          <div class="logo">D</div>
          <span v-show="!isCollapse" class="logo-text">Dook学院</span>
        </div>

        <el-menu
            :default-active="selectedItem"
            class="sidebar-menu"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
            :unique-opened="true"
            :background-color="isDarkMode ? '#1f2937' : '#ffffff'"
            :text-color="isDarkMode ? '#e5e7eb' : '#586681'"
            :active-text-color="isDarkMode ? '#60a5fa' : '#456ddc'"
        >

          <el-menu-item v-for="(item, index) in menuSections.main"
                        :key="item.path"
                        :index="item.path"
                        @click="handleClick(item.path)">
            <div class="menu-item-content">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.name }}</span>
            </div>
            <div v-if="item.badge" class="badge">{{ item.badge }}</div>
          </el-menu-item>

            <div class="menu-divider" v-show="!isCollapse"></div>

          <el-menu-item v-for="(item, index) in menuSections.communication"
                        :key="item.path"
                        :index="item.path"
                        @click="handleClick(item.path)">
            <div class="menu-item-content">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.name }}</span>
            </div>
            <div v-if="item.badge" class="badge">{{ item.badge }}</div>
            <el-badge v-if="item.path === 'privateChat' && $store.getters.totalUnreadCount > 0" :value="$store.getters.totalUnreadCount" class="unread-badge" type="danger"></el-badge>
          </el-menu-item>

          <div class="menu-divider" v-show="!isCollapse"></div>

          <el-menu-item v-for="(item, index) in menuSections.others"
                        :key="item.path"
                        :index="item.path"
                        @click="handleClick(item.path)">
            <div class="menu-item-content">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.name }}</span>
            </div>
          </el-menu-item>
        </el-menu>

        <div class="sidebar-footer" v-show="!isCollapse">
          <div class="user-status">
            <span class="status-dot online"></span>
            <span class="status-text">在线中</span>
          </div>
        </div>
      </div>

      <!-- 主容器，包含列表区域 -->
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

    <!-- 移动端菜单遮罩层 -->
    <div v-if="mobileMenuVisible" class="mobile-mask" @click="closeMobileMenu"></div>
  </el-container>
</template>

<script>
import CommonHeader from "../components/CommonHeader.vue";

export default {
  data() {
    return {
      menuSections: {
        main: [
          {
            path: "home",
            name: "首页",
            icon: 'el-icon-s-home'
          },
          {
              path: "aigc",
              name: "智能体应用",
              icon: 'el-icon-orange'
          },
          {
              path: "viewEdit",
              name: "页面工作台",
              icon: 'el-icon-edit'
          },
          {
            path: "forum",
            name: "魔王论坛",
            icon: 'el-icon-s-promotion',
            badge: '热门'
          },
          {
            path: "tipRank",
            name: "昨天热门",
            icon: 'el-icon-trophy'
          },
          {
            path: "bulletinBoard",
            name: "公告栏",
            icon: 'el-icon-bell'
          }
        ],
        communication: [
          {
            path: "groupChats",
            name: "世界频道",
            icon: 'el-icon-chat-line-square'
          },
          {
            path: "privateChat",
            name: "私聊",
            icon: 'el-icon-chat-dot-round',
          },
          {
            path: "littleGroupChats",
            name: "群聊",
            icon: 'el-icon-chat-round',
          },
          {
            path: "friendsList",
            name: "好友列表",
            icon: 'el-icon-user'
          }
        ],
        others: [
          {
            path: "customerService",
            name: "智能客服",
            icon: 'el-icon-service'
          },
          {
            path: "aboutUs",
            name: "关于我们",
            icon: 'el-icon-info'
          }
        ]
      },
      selectedItem: "",
      isCollapse: true, // 默认为收起状态
      mobileMenuVisible: false, // 移动端菜单是否可见
      isMobile: false, // 是否为移动设备
      isDarkMode: false // 是否为夜间模式
    };
  },
  created() {
    // 在sessionStorage中存储token
    sessionStorage.setItem(this.$store.state.myName+"XAccessToken", 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOjEsImV4cCI6MTcyNjI1ODg3OSwicGxhdGZvcm0iOjIsInVzZXJuYW1lIjoiMTUwNzMxNzEzMjAifQ.hsW2zoK0NOVqAeoHrV-mORCVdp3gBRlsH1mcIILe7V8');
    sessionStorage.setItem(this.$store.state.myName+"SysAccessToken", 'm7mSzYLFvbbFDU+d4fXFwg==');

    const initialPath = this.$route.path.substring('/Main/'.length);
    const initialMainPath = initialPath.split('/')[0];
    this.selectedItem = initialMainPath || "home";

    this.$watch("$route", (to, from) => {
      const path = to.path.substring('/Main/'.length);
      const mainPath = path.split('/')[0];
      this.selectedItem = mainPath || "home";
      // 在移动设备上切换路由时自动关闭侧边栏
      if (this.isMobile) {
        this.mobileMenuVisible = false;
      }
    });

    // 检测是否为移动设备
    this.checkIsMobile();
    window.addEventListener('resize', this.checkIsMobile);

    // 检查之前保存的主题设置
    const savedTheme = localStorage.getItem(this.$store.state.myName+'dook-theme');
    if (savedTheme) {
      this.isDarkMode = savedTheme === 'dark';
    } else {
      // 检查系统主题
      const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
      this.isDarkMode = prefersDarkMode;
    }

    // 应用主题到body元素
    if (this.isDarkMode) {
      document.body.classList.add('dark-mode');
    } else {
      document.body.classList.remove('dark-mode');
    }
  },
  destroyed() {
    // 清除事件监听
    window.removeEventListener('resize', this.checkIsMobile);
  },
  methods: {
    toggleTheme() {
      this.isDarkMode = !this.isDarkMode;
      localStorage.setItem(this.$store.state.myName+'dook-theme', this.isDarkMode ? 'dark' : 'light');

      // 更新body标签的类名以适应全局样式
      if (this.isDarkMode) {
        document.body.classList.add('dark-mode');
      } else {
        document.body.classList.remove('dark-mode');
      }
    },
    checkIsMobile() {
      this.isMobile = window.innerWidth < 768;
      // 默认在移动设备上收起侧边栏
      if (this.isMobile) {
        this.isCollapse = true;
        this.mobileMenuVisible = false;
      }
    },
    toggleMobileMenu() {
      if (this.isMobile) {
        this.mobileMenuVisible = !this.mobileMenuVisible;
        this.isCollapse = !this.mobileMenuVisible;
      } else {
        this.isCollapse = !this.isCollapse;
      }
    },
    closeMobileMenu() {
      this.mobileMenuVisible = false;
      this.isCollapse = true;
    },
    handleClick(path) {
      const fullPath = `/Main/${path}`;

      if (this.$route.path != fullPath && !(fullPath === "/")) {
        this.$router.push(fullPath);
      }

      // 移动设备上点击菜单项后关闭菜单
      if (this.isMobile) {
        this.mobileMenuVisible = false;
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleMouseEnter() {
      if (!this.isMobile) {
        this.isCollapse = false; // 鼠标移入时展开
      }
    },
    handleMouseLeave() {
      if (!this.isMobile) {
        this.isCollapse = true; // 鼠标移出时收起
      }
    }
  },
    mounted() {
        // 保存原始监听器
        const originalOnMessage = this.$store.state.websocket.onmessage;

        // 设置全局监听逻辑
        this.$store.state.websocket.onmessage = (event) => {
            if (originalOnMessage) originalOnMessage(event);

            const message = JSON.parse(event.data);
            this.$store.commit('incrementUnread', message.from);
        };

        // 保存当前监听器引用
        this.currentOnMessage = this.$store.state.websocket.onmessage;
    },
  components: {
    CommonHeader,
  },
};
</script>

<style lang="scss" scoped>
.main-header {
  color: #333;
  line-height: 60px;
  border-bottom: 1px solid #eef1ff;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 1001;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: #f7f9fc;
  color: #456ddc;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;

  &:hover {
    background-color: #eef1ff;
    transform: rotate(30deg);
  }
}

.mobile-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: #f7f9fc;
  color: #456ddc;
  font-size: 20px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;

  &:hover {
    background-color: #eef1ff;
  }

  @media (max-width: 768px) {
    display: flex;
  }
}

.sidebar {
  position: fixed;
  top: 60px; /* 头部高度 */
  bottom: 0;
  left: 0;
  width: 70px; /* 收缩状态下的宽度 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000; /* 确保覆盖在页面内容之上 */
  background-color: #ffffff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  @media (max-width: 768px) {
    left: -70px; /* 在移动设备上默认隐藏 */
  }
}

.sidebar.expanded {
  width: 240px; /* 展开状态下的宽度 */
}

.sidebar.mobile-visible {
  left: 0; /* 显示移动端侧边栏 */
  width: 240px;

  @media (max-width: 576px) {
    width: 260px;
  }
}

.mobile-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.logo-container {
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #f0f2f7;
}

.logo {
  width: 36px;
  height: 36px;
  background-color: #456ddc;
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  flex-shrink: 0;
  transition: all 0.3s ease;

  &:hover {
    transform: rotate(10deg);
  }
}

.logo-text {
  margin-left: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

.sidebar-menu {
  flex: 1;
  border-right: none;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100% - 140px);

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
}

.menu-section {
  padding: 12px 20px 8px;
  font-size: 12px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.menu-divider {
  height: 1px;
  background-color: #f0f2f7;
  margin: 8px 20px;
}

.el-menu-item {
  height: 56px;
  line-height: 56px;
  padding: 0 16px 0 20px !important;
  margin: 2px 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;

  &.is-active {
    background-color: #eef1ff !important;
    color: #456ddc !important;
    transform: translateX(4px);

    i {
      color: #456ddc !important;
      transform: scale(1.1);
    }
  }

  &:hover {
    background-color: #f7f9fc !important;
    transform: translateX(4px);
  }
}

.menu-item-content {
  display: flex;
  align-items: center;

  i {
    font-size: 18px;
    margin-right: 12px;
    width: 24px;
    text-align: center;
    transition: all 0.3s ease;
  }
}

.badge {
  background-color: #f56c6c;
  color: white;
  font-size: 12px;
  padding: 0 8px;
  height: 20px;
  line-height: 20px;
  border-radius: 10px;
  white-space: nowrap;
  transition: all 0.3s ease;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(245, 108, 108, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 108, 108, 0);
  }
}

.sidebar-footer {
  height: 60px;
  border-top: 1px solid #f0f2f7;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.user-status {
  display: flex;
  align-items: center;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;

  &.online {
    background-color: #67c23a;
  }
}

.status-text {
  font-size: 14px;
  color: #666;
}

/* 确保主容器有适当的左侧填充 */
.el-container > .el-container {
  margin-left: 70px; /* 根据收缩状态下的宽度调整 */
  width: calc(100% - 70px);
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  @media (max-width: 768px) {
    margin-left: 0;
    width: 100%;
  }
}

/* 当侧边栏展开时，调整主内容区位置和宽度 */
.sidebar.expanded ~ .el-container {
  margin-left: 240px;
  width: calc(100% - 240px);

  @media (max-width: 768px) {
    margin-left: 0;
    width: 100%;
  }
}

/* 暗黑模式样式 */
.dark-mode {
  .main-header {
    background-color: #1f2937;
    color: #e5e7eb;
    border-bottom: 1px solid #374151;
  }

  .theme-toggle, .mobile-menu-toggle {
    background-color: #374151;
    color: #60a5fa;
  }

  .sidebar {
    background-color: #1f2937;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
  }

  .logo-container {
    border-bottom: 1px solid #374151;
  }

  .logo {
    background-color: #60a5fa;
  }

  .logo-text {
    color: #e5e7eb;
  }

  .menu-section {
    color: #9ca3af;
  }

  .menu-divider {
    background-color: #374151;
  }

  .el-menu-item {
    &.is-active {
      background-color: #374151 !important;
      color: #60a5fa !important;

      i {
        color: #60a5fa !important;
      }
    }

    &:hover {
      background-color: #374151 !important;
    }
  }

  .sidebar-footer {
    border-top: 1px solid #374151;
  }

  .status-text {
    color: #9ca3af;
  }

  .el-main {
    background-color: #111827;
    color: #e5e7eb;
  }
}
</style>

<style lang="scss">
/* 未读消息徽章样式 */
.unread-badge {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.el-menu-item {
  position: relative;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f7f9fc;

  &.dark-mode {
    background-color: #111827;
    color: #e5e7eb;
  }
}

/* 覆盖ElementUI默认样式 */
.el-menu--collapse .el-menu-item {
  padding: 0 !important;
  text-align: center;

  i {
    margin: 0 !important;
  }
}

.el-container {
  height: 100vh;
}

.dark-mode {
  .el-main {
    background-color: #111827 !important;
  }

  .el-card {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;

    .el-card__header {
      background-color: #1f2937 !important;
      border-color: #374151 !important;
    }
  }

  // 论坛帖子和列表背景
  .forum-container, .post-container, .thread-list, .reply-list {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;
  }

  // 论坛帖子项
  .post-item, .thread-item, .reply-item {
    background-color: #1f2937 !important;
    border-color: #374151 !important;

    &:hover {
      background-color: #2d3748 !important;
    }
  }

  // 论坛分类标签
  .forum-tag, .post-tag, .category-tag {
    background-color: #374151 !important;
    color: #e5e7eb !important;
  }

  // 论坛内容区域
  .forum-content, .post-content, .reply-content {
    color: #e5e7eb !important;

    a {
      color: #60a5fa !important;

      &:hover {
        color: #93c5fd !important;
      }
    }
  }

  // 论坛头部和底部
  .forum-header, .forum-footer {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
  }

  // 论坛编辑器
  .editor-container {
    background-color: #1f2937 !important;

    .ql-editor, .el-textarea__inner {
      background-color: #374151 !important;
      color: #e5e7eb !important;
    }

    .ql-toolbar {
      background-color: #2d3748 !important;
      border-color: #4b5563 !important;

      .ql-stroke {
        stroke: #e5e7eb !important;
      }

      .ql-fill {
        fill: #e5e7eb !important;
      }

      .ql-picker-label {
        color: #e5e7eb !important;
      }
    }
  }

  // 对话框和弹出层
  .el-dialog, .el-message-box {
    background-color: #1f2937 !important;

    .el-dialog__title, .el-message-box__title {
      color: #e5e7eb !important;
    }

    .el-dialog__body, .el-message-box__message {
      color: #e5e7eb !important;
    }

    .el-dialog__headerbtn .el-dialog__close {
      color: #9ca3af !important;

      &:hover {
        color: #60a5fa !important;
      }
    }
  }

  // 列表和表格
  .el-table {
    background-color: #1f2937 !important;
    color: #e5e7eb !important;

    th, tr, td {
      background-color: #1f2937 !important;
      color: #e5e7eb !important;
      border-color: #374151 !important;
    }

    th.is-leaf {
      background-color: #374151 !important;
    }

    .el-table__empty-block {
      background-color: #1f2937 !important;

      .el-table__empty-text {
        color: #9ca3af !important;
      }
    }

    .el-table__header-wrapper, .el-table__fixed-header-wrapper {
      th {
        background-color: #2d3748 !important;
        color: #e5e7eb !important;
        border-color: #4b5563 !important;
      }
    }

    --el-table-border-color: #374151 !important;
    --el-table-header-background-color: #374151 !important;
    --el-table-row-hover-background-color: #2d3748 !important;
  }

  // 分割线
  .el-divider {
    background-color: #374151 !important;

    .el-divider__text {
      background-color: #111827 !important;
      color: #e5e7eb !important;
    }
  }

  // 表单元素
  .el-form-item__label {
    color: #e5e7eb !important;
  }

  // 标签
  .el-tag {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;

    &.el-tag--success {
      background-color: #065f46 !important;
      border-color: #047857 !important;
    }

    &.el-tag--warning {
      background-color: #92400e !important;
      border-color: #b45309 !important;
    }

    &.el-tag--danger {
      background-color: #991b1b !important;
      border-color: #b91c1c !important;
    }

    &.el-tag--info {
      background-color: #374151 !important;
      border-color: #4b5563 !important;
    }
  }

  // 面包屑
  .el-breadcrumb__inner, .el-breadcrumb__separator {
    color: #9ca3af !important;
  }

  .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: #e5e7eb !important;
  }

  // 提示信息
  .el-message {
    background-color: #1f2937 !important;
    border-color: #374151 !important;

    .el-message__content {
      color: #e5e7eb !important;
    }
  }

  // 弹出确认框
  .el-popconfirm__action {
    .el-button {
      border-color: #4b5563 !important;
    }
  }

  // 消息提示
  .el-notification {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;

    .el-notification__title {
      color: #e5e7eb !important;
    }

    .el-notification__content {
      color: #d1d5db !important;
    }
  }

  // 输入框和下拉菜单
  .el-input__inner, .el-textarea__inner {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;

    &::placeholder {
      color: #9ca3af !important;
    }
  }

  .el-input-group__append, .el-input-group__prepend {
    background-color: #2d3748 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
  }

  // 滚动条样式
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #1f2937;
  }

  ::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 4px;

    &:hover {
      background: #6b7280;
    }
  }

  // 覆盖所有可能的元素背景色
  .container, .main-container, .content-container, .forum-wrapper {
    background-color: #111827 !important;
    color: #e5e7eb !important;
  }
}

@media (max-width: 768px) {
  .el-header {
    padding: 0 15px !important;
  }

  .el-main {
    padding: 15px !important;
  }
}
</style>

